import React from 'react'
import {Modal,Form, message,Select, Steps} from 'antd'
//引入connect用于连接UI组件与redux
import {connect} from 'react-redux'
import { UpdateOrderActionAsync,LoadOrderActionAsync } from '../../../redux/action/orderAction'
import http from '../../../service/http';
const { Option } = Select;
const { Step } = Steps;

function UpdateOrder(props) {
  const [progress,setProgress] = React.useState(-1)
    let [status,setStatus]=React.useState([])
  const handleChange=(e)=>{
    // setParams(params)
    switch(e){
      case '已付款':
        setProgress(0)
        break;
      case '已接单':
        setProgress(1)
        break;
      default:
        setProgress(2)
    }
  }
  const [OrderUpdateForm]=Form.useForm()
  React.useEffect(() => {
    http.getEnum({name:'StatusEnum'}).then((res)=>{
      if(res.code!==200)return
      setStatus(res.data)
    })
    OrderUpdateForm.setFieldsValue(props.row)
    switch(props.row.status){
      case '已付款':
        setProgress(0)
        break;
      case '已接单':
        setProgress(1)
        break;
      case '已完成':
        setProgress(2)
        break;
      default:
        setProgress(-1)
    }
  // eslint-disable-next-line react-hooks/exhaustive-deps
  },[props.row])
  return (
    <div>
      <Modal
        title="处理订单状态"
        visible={props.visible}
        forceRender 
        onOk={async ()=>{
          let fieldsValue = await OrderUpdateForm.validateFields()
          props.UpdateOrderActionAsync({...props.row,...fieldsValue}).then((res)=>{
            props.LoadOrderActionAsync({pageNum:props.page})
            props.close()
            message.success('处理成功!')
          })
        }}
        onCancel={props.close}
        okText='确定'
        cancelText='取消'
        >
        <Form  
          layout="horizontal"
          form={OrderUpdateForm}
          name="OrderUpdateForm"
        >
        <Form.Item
          name="status"
          label="状态"
          rules={[
            {
              required: true,
            },
          ]}
        >
          <Select
            placeholder="请选择"
            style={{
              width: 160,
            }}
            size='middle'
            onChange={handleChange}
          >
            {status.length===0?'':status.map((item,index)=>{
              return <Option value={item.text} key={item.id}>{item.text}</Option>
            })}
          </Select>
        </Form.Item>
        </Form>
        <Steps current={progress} status="process">
          <Step title="第一步" description="买家已经付款"/>
          <Step title="第二步" description="商家处理中" />
          <Step title="第三步" description="订单已完成"/>
        </Steps>,
      </Modal>
    </div>
  )
}
//使用connect()()创建并暴露一个Count的容器组件
export default connect(
	state => ({
    OrderList:state.orderList
	}),
	{UpdateOrderActionAsync,LoadOrderActionAsync}
)(UpdateOrder)

